<template>
  <el-menu v-show="isMenuChildNode"
           :default-active="routerKey"
           class="el-menu-demo"
           mode="horizontal"
           @select="handleSelect">
    <el-menu-item class="minu-item"
                  v-for="item in menuTab"
                  :key="`/board/${item.menuId}`"
                  :index="`/board/${item.menuId}`">{{ item.name }}</el-menu-item>
  </el-menu>
  <!-- </div> -->
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "TableTabs",
  data () {
    return {};
  },
  computed: {
    ...mapState({
      menuTab: (state) => state.menu.menuChildNode,
      isMenuChildNode: (state) => state.menu.isMenuChildNode
    }),
    routerKey () {
      return this.$route.path;
    }
  },
  // watch: {
  //   menuTab: {
  //     handler (val) {
  //       if (this.isMenuChildNode) {
  //         this.$emit('menuChildNode', val)
  //         // this.$router.push(`/board/${val[0].menuId}`);
  //         console.log('val---->', val)
  //       }
  //     }
  //   }
  // },
  created () {
    console.log("menuTab--->", this.menuTab);
  },
  methods: {
    // handleTabsClick (item, index) {
    //   this.showActive = index
    //   this.$router.push("/board/" + item.menuId);
    // },
    handleSelect (key, keyPath) {
      this.$router.push(key);
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
.el-menu-demo {
  height: 40px;
  margin-top: 2px;
}
.el-menu-demo >>> .el-menu-item {
  height: 40px;
  line-height: 40px;
}

/* .tab-btn-warp .left-tabs {
  margin-bottom: 16px;
}
.active {
  width: 100%;
  color: var(--prev-icon-color-orange);
  border: 1px solid var(--prev-icon-color-orange);
  cursor: pointer;
}
.router-link {
  width: 100%;
  display: flex;
  height: 34px;
  text-align: center;
  line-height: 34px;
  padding: 0 7px;
}
.fixed {
  position: absolute;
  top: 0;
} */
</style>
